/* 构建与特性页 */

// ==================
// 所需的各种插件
// ==================

import React from 'react';
import P from 'prop-types';
// import { connect } from 'react-redux';
import { Router,Route,Link } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { Layout, Menu, Icon,Avatar,Breadcrumb } from 'antd';

const { SubMenu } = Menu;
const { Header, Footer, Sider } = Layout;

import  Logo from '../../assets/images/logo.png';
import './index.less';

import Contents from './contents';

// ==================
// 所需的所有组件
// ==================



// ==================
// 本页面所需action
// ==================


// ==================
// Definition
// ==================
class FeaturesPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        collapsed: false,
    };
    this.toggle=this.toggle.bind(this);
  }
    toggle() {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

  render() {
    return (
        <Layout>
            <Sider trigger={null}
                   collapsible
                   collapsed={this.state.collapsed}
                   //菜单栏内容较长时，使用固定侧边栏可以提供更好的体验
                   style={{ overflow: 'auto', minHeight: '100vh'}}
                >
                <div className="logo" >
                    <img src={Logo}/>
                </div>
                {/*<Avatar size="large" src={Logo}  />*/}
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                    <Menu.Item key="1">
                        <Icon type="user" />
                        <span className="nav-text">nav 2</span>
                        {/*<Link to="./home">home</Link>*/}
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Icon type="video-camera" />
                        <span className="nav-text">nav 2</span>
                        {/*<Link to="./test">home</Link>*/}
                    </Menu.Item>
                    <Menu.Item key="3">
                        <Icon type="upload" />
                        <span className="nav-text">apple demo</span>
                        <Link to="./dashboard">apple demo</Link>
                    </Menu.Item>
                    <Menu.Item key="4">
                        <Icon type="bar-chart" />
                        <span className="nav-text">nav 4</span>
                    </Menu.Item>
                    <Menu.Item key="5">
                        <Icon type="cloud-o" />
                        <span className="nav-text">nav 5</span>
                    </Menu.Item>
                    <SubMenu key="6" title={<span><Icon type="user" />subnav 1</span>}>
                        <Menu.Item key="61">option1</Menu.Item>
                        <Menu.Item key="62">option2</Menu.Item>
                        <Menu.Item key="63">option3</Menu.Item>
                        <Menu.Item key="64">option4</Menu.Item>
                    </SubMenu>
                    <SubMenu key="7" title={<span><Icon type="laptop" />subnav 2</span>}>
                        <Menu.Item key="71">option5</Menu.Item>
                        <Menu.Item key="72">option6</Menu.Item>
                        <Menu.Item key="73">option7</Menu.Item>
                        <Menu.Item key="74">option8</Menu.Item>
                    </SubMenu>
                    <Menu.Item key="8">
                        <Icon type="shop" />
                        <span className="nav-text">nav 8</span>
                    </Menu.Item>
                    <Menu.Item key="9">
                        <Icon type="user" />
                        <span className="nav-text">nav 9</span>
                    </Menu.Item>
                    <Menu.Item key="10">
                        <Icon type="video-camera" />
                        <span className="nav-text">nav 10</span>
                    </Menu.Item>
                    <Menu.Item key="11">
                        <Icon type="upload" />
                        <span className="nav-text">nav 11</span>
                    </Menu.Item>

                </Menu>
            </Sider>
            <Layout>
                <Header style={{ background: '#fff', padding: "0 20px" }}>
                    <Icon
                        className="trigger"
                        type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                        onClick={this.toggle}
                    />
                </Header>
                <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>App</Breadcrumb.Item>
                </Breadcrumb>
                <Contents />
                <Footer className="text-center" >
                    Ant Design ©2016 Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
  }
}

// ==================
// PropTypes
// ==================

FeaturesPage.propTypes = {
  // location: P.any,
  // history: P.any,
};

// ==================
// Export
// ==================

export default FeaturesPage;
